<template>
	<view class="content">
		<ZPaging ref="paging" v-model="list" :auto="false" system-loading-text="Loading"
			loading-more-no-more-text="沒有更多了" loading-more-default-text="點擊加載更多" loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載" empty-view-text="沒有數據哦~" refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新" refresher-refreshing-text="正在刷新" empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗" @query="queryList">
			<template #top>
				<view class="center bold c007aff title">Messages</view>
				<view class="navbox">
					<u-subsection :list="nav" bg-color="#fff" button-color="#fff" v-model="current"
						@change="changeNav"></u-subsection>
				</view>
				<view class="block">

				</view>
				<view class="search-warp widths">
					<view class="item-wrap">
						<uni-data-select v-model="case_id" placeholder="請選擇" :localdata="range" @change="changeCase"></uni-data-select>
					</view>
					<view class="widths search">
						<u-search v-model="form_template_name" :show-action="false" :clearabled="false"
							:animation="true" placeholder="輸入專案或檢查表名稱" @search="toSearch"></u-search>
					</view>
				</view>
				<view class="block">

				</view>
			</template>
			<template #default>
				<view class="widths list">
					<view v-for="(v,k) in list" :key="k" @click="toDetailr(v)">
						<view class="wrap">
							<view class="wrap-content">
								<view class="line">

								</view>
								<view class="row-wrap">
									<view class="row-title">
										<u-image width="42rpx" height="42rpx" src="../../static/m-icon.png"></u-image>
										<text>
											{{v.form_template_name}}
										</text>
									</view>
									<view class="row row1">
										<view class="name">
											填寫人：{{v.member_name}}
										</view>
										<view class="">
											隶属专案：{{v.case_title}}
										</view>
										<view class="name">
											填寫時間：{{v.create_time}}
										</view>
										<view v-if="+status === 2" class="name">
											查看時間：{{v.create_time}}
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template #bottom>
				<Tabar></Tabar>
			</template>
		</ZPaging>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getlist,
		getCaselist,
		readMessage
	} from "@/api/message.js";

	import NavBar from "@/component/NavBar"
	import Tabar from "@/component/HomeTab"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	export default {
		components: {
			NavBar,
			ZPaging,
			Tabar
		},
		data() {
			return {
				nav: [{
						name: '待查看',
						ident: 1,
					},
					{
						name: '已查看',
						ident: 2,
					},
				],
				current: 0,
				list: [],
				options: [{
					text: 'Delete',
					style: {
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				}],
				form_template_name: '',
				show: false,
				range: [],
				case_id: '',
				pageNo: 1,
				pageSize: 10,
				status: 1
			}
		},
		onShow() {
			this.setTabList(uni.getStorageSync("bindevice"))
		},
		created() {
			const app = getApp();
			this.getCaseList()
		},
		mounted() {
			this.$refs.paging.reload();
		},
		methods: {
			...mapMutations(['setTabList']),
			changeNav(e) {
				this.status = e + 1
				this.current = e
				this.reload()
			},
			reload() {
				this.$refs.paging.reload();
			},
			toSearch() {
				this.reload()
			},
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo
				this.pageSize = pageSize
				this.getListData()
			},
			getListData() {
				let params = {
					uid: uni.getStorageSync("uid"),
					status: this.status,
					case_id: this.case_id,
					form_template_name: this.form_template_name,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				getlist(params).then(res => {
					let resData = res || []
					this.$refs.paging.complete(resData)
				})
			},
			changeCase(val) {
				this.reload()
			},
			getCaseList() {
				let params = {
					uid: uni.getStorageSync("uid"),
				}
				getCaselist(params).then(res => {
					let data = res || []
					this.range = data.map(item => {
						return {
							text: item.case_title,
							value: item.case_id
						}
					})
					console.log(123, res)
				})
			},
			// 查看答案詳情
			toDetailr(item) {
				if(+this.status === 1){
					readMessage({
						uid: uni.getStorageSync("uid"),
						casezy_form_template_message_id:item.id
					}).then(res=>{
						uni.navigateTo({
							url: `/pages/checkForm/detailPage?casezy_form_template_result_id=${item.casezy_form_template_result_id}`
						});
					})
				}else{
					uni.navigateTo({
						url: `/pages/checkForm/detailPage?casezy_form_template_result_id=${item.casezy_form_template_result_id}`
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
	}

	.navbox {
		width: 70vw;
		margin: 0 auto;

		/deep/ .u-item {
			position: relative;

			&::after {
				content: "";
				width: 2rpx;
				height: 32rpx;
				background-color: #f1f1f1;
				position: absolute;
				right: 0rpx;
			}

			&.u-item-3::after {
				display: none;
			}
		}

		/deep/ .u-item-bg {
			box-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, .1);
		}
	}

	.list {
		/deep/ .u-btn-text {
			color: #fff !important;
		}

		.items {
			padding: 20rpx 0;
			border-bottom: 2rpx dashed #eaf1f9;

			.left {
				width: calc(100% - 160rpx);
				margin-right: 20rpx;
			}

			.right {
				width: 140rpx;
				flex-shrink: 0;

				.btn {
					width: 140rpx;
					height: 54rpx;
					background-color: #007aff;
					border-radius: 10rpx;
					box-shadow: 2rpx 2rpx 6rpx rgba(9, 100, 199, 1);
				}

			}
		}
	}

	.block {
		height: 24rpx;
	}

	.db-block {
		height: 100rpx
	}

	.search-warp {
		display: flex;
		align-items: center;

		.item-wrap {
			border-radius: 12rpx;
			text-align: center;
			line-height: 64rpx;
			width: 400rpx;
			margin-right: 24rpx;
			border: 1px solid #979797;
		}
	}

	.wrap {
		background: rgba(239, 244, 255, 0.8);
		border-radius: 16rpx;
		padding: 40rpx 0 20rpx;
		margin-bottom: 24rpx;
		cursor: pointer;

		.wrap-content {
			display: flex;
			align-items: center;
			padding-right: 24rpx;

			.line {
				background: #F9D448;
				border-radius: 12rpx;
				width: 12rpx;
				height: 106rpx;
				margin-right: 110rpx;
			}

			.row-wrap {
				flex: 1;

				.row-title {
					display: flex;
					gap: 24rpx;
					margin-bottom: 24rpx;
				}

				.row {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;


				}

				.row1 {
					margin-bottom: 24rpx;
				}
			}
		}
	}
</style>